// 新闻展览js
(function () {
  const galleryList = [
    {
      topic: 'A-2029',
      title: '与我们共赴暗影——《守望先锋》“归来”万圣夜惊魂再临！',
      url: ' https://ow.blizzard.cn/article/news/2028',
      img: 'https://overwatch.nosdn.127.net/a/images/2022/10/25/aa834702e62c3cc74aae9eaa7c9c3621.jpg',
      heading: '与我们共赴暗影——《守望先锋》“归来”万圣夜惊魂再临！',
      footer: '2022-10-25'
    },
    {
      topic: 'A-2026',
      title: '万圣夜惊魂：阿德勒斯布鲁恩领主桌上的文书',
      url: 'https://ow.blizzard.cn/article/news/2025',
      img: ' https://overwatch.nosdn.127.net/a/images/2022/10/21/a4ef2e06ca9727cbd0d92d2d8ce724e0.jpg',
      heading: '万圣夜惊魂：阿德勒斯布鲁恩领主桌上的文书',
      footer: '2022-10-21'
    },
    {
      topic: 'A-2021',
      title: '双倍经验活动本周末开启 10月26日登录免费领皮肤和吊坠',
      url: ' https://ow.blizzard.cn/article/news/2020',
      img: ' https://overwatch.nosdn.127.net/a/images/2022/10/19/5e373c621a21f53f8adb75172032ff2c.jpg',
      heading: '双倍经验活动本周末开启 10月26日登录免费领皮肤和吊坠',
      footer: '2022-10-19'
    },
    {
      topic: 'A-2023',
      title: '开发者博文：上线之后的游戏、地图与竞技更新',
      url: ' https://ow.blizzard.cn/article/news/2018',
      img: ' https://overwatch.nosdn.127.net/a/images/2022/10/19/dd400e72109df45ffb4bdfab40b3dd33.jpg',
      heading: '>开发者博文：上线之后的游戏、地图与竞技更新',
      footer: '2022-10-14'
    },
    {
      topic: 'A-2022',
      title: '《守望先锋》“归来”近期问题说明、道歉补偿与后续活动公告',
      url: ' https://ow.blizzard.cn/article/news/2017',
      img: 'https://overwatch.nosdn.127.net/a/images/2022/10/19/eb151d91180b8748a0076c3fe04471e9.jpg',
      heading: '《守望先锋》“归来”近期问题说明、道歉补偿与后续活动公告',
      footer: '2022-10-12'
    },
    {
      topic: 'A-2011',
      title: '动画短片：雾子',
      url: ' https://ow.blizzard.cn/article/news/1993',
      img: ' https://overwatch.nosdn.127.net/a/images/2022/10/8/d466675de3c19e4dd12f5bc3f4eb0ef3.jpg',
      heading: '动画短片：雾子',
      footer: '2022-10-08'
    },
    {
      topic: 'A-2003',
      title: '《守望先锋》“归来”正式上线免费开玩 第1赛季解锁源氏神话皮肤',
      url: '  https://ow.blizzard.cn/article/news/1994',
      img: 'https://overwatch.nosdn.127.net/a/images/2022/10/4/0df666816e92943fa9d247891c08f0d7.jpg',
      heading: '《守望先锋》“归来”正式上线免费开玩 第1赛季解锁源氏神话皮肤',
      footer: '2022-10-04'
    },
    {
      topic: 'A-2002',
      title: '《守望先锋》“归来” 第一赛季高级战令',
      url: '  https://shop.battlenet.com.cn/zh-cn/product/overwatch-battle-pass',
      img: 'https://overwatch.nosdn.127.net/a/images/2022/10/4/fe9af6947d14c3efa5bad4c7101c4236.jpg',
      heading: '《守望先锋》“归来” 第一赛季高级战令',
      footer: '2022-10-04'
    }
  ]
  // 根据函数渲染页面   
  // 获取需要渲染得元素  把渲染函数得字符串结果  赋值给渲染元素的HTML
  document.querySelector('.gallery-list').innerHTML = galleryList.map(item => {
    console.log(item);
    //解构
    const { topic, title, url, img, heading, footer } = item
    return `
         <div class="gallery-items" topic-key="${topic}" data-type="5">
            <a title="${title}" href="${url}">
              <div class="image-wrapper">
                <img src="${img}">
              </div>
              <div class="gallery-text">
                <div class="main">
                  <h4 class="heading">${heading}</h4>
                </div>
                <div class="gallery-footer">${footer}</div>
              </div>
            </a>
          </div> 
    `
  }).join('')



  // 英雄产品
  const galleryWrap = [
    {
      img: 'https://blz.nosdn.127.net/1/tm/blz/overwatch/home/F2P.jpeg',
      heading: '次时代版本 免费游玩',
      description: '《守望先锋》“归来”是一款免费游玩、长期运营并持续带来优化与更新的在线游戏。与好友组队同行，探索焕然一新的PvP体验。'
    },
    {
      img: 'https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Heroes.jpeg',
      heading: '激动人心的全新英雄',
      description: '更多不同凡响的英雄将会加入当前的英雄阵容。无论你喜欢领军冲锋、伏击敌人还是援助盟友，总有适合你的新英雄。'
    },
    {
      img: 'https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Action.jpeg',
      heading: '屡获殊荣的动作游戏',
      description: '全新英雄上阵，探索更多地图，体验5v5战斗赋予玩家改写战局的能力，畅享紧张刺激的战斗。'
    },
    {
      img: 'https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Crossplay.png',
      heading: '焕然一新的全新体验',
      description: '获得全方位重制的众多英雄、全新的战斗音效和英雄语音、引人注目的新皮肤和酷炫外观。更多精彩内容尽在《守望先锋》“归来”。'
    }
  ]
  document.querySelector('.features-heroes .gallery-wrap').innerHTML = galleryWrap.map(item => {
    const { img, heading, description } = item
    return `
           <div class="gallery-items">
          <div class="image-wrapper"><img src="${img}"></div>
          <div class="gallery-text">
            <h4 class="heading">${heading}</h4>
            <div class="description">${description}</div>
          </div>
          </div>
    `
  }).join('')




})();
(function () {
  // 初始数据
  const heroCon = [
    {
      text: '重装',
      content: '重装英雄可以承受大量伤害，还能粉碎森严的防线，不论是抱团的敌人还是狭窄的要道都不在话下。身为重装英雄，领军冲锋由你一马当先。',
    },
    {
      text: '输出',
      content: '输出英雄负责搜寻敌人、全力出击并将其歼灭，本领和技能多样，风格百变。这些英雄的力量令人生畏，但自身较为脆弱，需要支援照应才能生存。',
    },
    {
      text: '支援',
      content: '支援英雄可以通过治疗、护盾、伤害增强和封锁敌人来强化盟友。作为支援英雄，你就是团队生存的支柱。',
    },
  ]
  // 获取元素
  const title = document.querySelector('.con h3')//ttext 数据地方
  console.log(title);
  const content = document.querySelector('#mjrlavv')//文字渲染
  console.log(content);
  // const left = document.querySelector('.left .img')
  const ctrlo = document.querySelector('.mjrtab')
  // console.log(ctrlo);
  ctrlo.addEventListener('click', e => {
    if (e.target.tagName === 'LI') {
      // console.log(id);
      let id = e.target.dataset.id
      // 按钮部分选中效果切换
      document.querySelector('.tab-active').classList.remove('tab-active')
      e.target.className = 'tab-active'
      // 重新渲染文字
      title.innerHTML = heroCon[id].text
      content.innerHTML = heroCon[id].content
      // 图片切换
      console.log(document.querySelector('.left .pic-active'));
      document.querySelector('.left .pic-active').classList.remove('pic-active')
      document.querySelector(`.xsaz :nth-child(${+id + 1})`).classList.add('pic-active')
    }
  })

})();


